<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<!-- 

		路由原理：
		（1）传统开发方式 url改变后，立刻发生请求响应整个页面，有可能资源过多，传统开发会让页面出现白屏
		（2） SPA  Single Page Application 单页面应用
			锚点值的改变后 不会立刻发送请求，而是在某个合适的时机，发起ajax请求，
			局部改变页面的数据 

			优点：页面不立刻跳转 用户体验好
	 -->

	 <a href="#/login">登录页面</a>
	 <a href="#/register">注册页面</a>

	 <div id="app">
	 	
	 </div>

	 <script type="text/javascript">
	 	var oDiv = document.getElementById('app');
	 	window.onhashchange = function() {
	 		console.log(location.hash);

	 		switch (location.hash) {
	 			case '#/login':
	 				oDiv.innerHTML = '<h2>我是登录页面</h2>'
	 				break;
	 			case '#/register':
	 				oDiv.innerHTML = '<h2>我是注册页面</h2>'
	 				break;
	 			default:
	 				// statements_def
	 				break;
	 		}
	 	}

	 </script>

</body>
</html>